<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"

      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script  type="text/javascript" src="media/js/autoNumeric.js"></script>

            <h1>Cadastrando</h1>
            <p:tabView id="tabView" activeIndex="#{managerEnterprise.tab}" > 
                <p:tab id="tba1" title="Empreendimento"> 

                    <div class="section">

                        <h:form id="create" enctype="multipart/form-data">
                            <p:growl autoUpdate="true" />

                            <div class="container_24 clearfix">
                                <p:panel header="Dados Gerais" styleClass="clearfix grid_24 " >
                                    <p:outputLabel for="name" value="Nome:" styleClass="grid_4" />
                                    <p:inputText id="name" required="true" value="#{managerEnterprise.enterprise.name}" styleClass="grid_19" />

                                    <p:outputLabel for="construction" value="Construtora:"  styleClass="grid_4" />
                                    <p:autoComplete id="construction" styleClass="grid_19" dropdown="true" converter="constructionconverter"   
                                                    var="constructionValue" required="true" itemLabel="#{constructionValue.name.toString()}" 
                                                    itemValue="#{constructionValue}" value="#{managerEnterprise.construction}"
                                                    scrollHeight="200" forceSelection="true"
                                                    completeMethod="#{managerConstruction.autocomplete}" />  

                                    <p:outputLabel value="Cidade:" styleClass="grid_4" />
                                    <p:autoComplete styleClass="grid_19" dropdown="true" converter="cityconverter"   
                                                    var="cityValue" itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" 
                                                    itemValue="#{cityValue}" value="#{managerEnterprise.city}"
                                                    scrollHeight="200" forceSelection="true"
                                                    completeMethod="#{managerCity.autocomplete}" />  

                                </p:panel>
                                <div class="clear"/>
                                <p:panel header="Lotes" styleClass="clearfix grid_24 ">

                                    <p:outputLabel value="Quadras:" styleClass="grid_4" />
                                    <p:inputText styleClass="grid_7" value="#{managerEnterprise.enterprise.qtdBlock}" >
                                        <p:ajax event="blur" update=":tabView:createLot:blockAutocomplete" /> 
                                    </p:inputText>

                                    <p:outputLabel value="N° de Lotes:" styleClass="grid_5 alpha" />
                                    <p:inputText styleClass="grid_7"  value="#{managerEnterprise.enterprise.qtdLot}"/>

                                </p:panel>

                                <div class="clear"/>
                                <p:panel header="Juros" styleClass="clearfix grid_24 ">


                                    <p:outputLabel value="Entrada (%):" styleClass="grid_4" />
                                    <p:inputText styleClass="grid_7" value="#{managerEnterprise.enterprise.porcBegin}"
                                                 onkeypress="jQuery(this).autoNumeric({pSign: 's',aSign: '%', aSep: '.', aDec: ','} );">
                                        <f:convertNumber type="percent"  locale="pt,BR"  />
                                    </p:inputText>

                                    <div class="clear-both" />

                                    <p:outputLabel value="Inadimplência (%):" styleClass="grid_4 badDebitLabel" />
                                    <p:inputText styleClass="grid_7" value="#{managerEnterprise.enterprise.porcInadiplencia}"
                                                 onkeypress="jQuery(this).autoNumeric({pSign: 's',aSign: '%', aSep: '.', aDec: ','} );">
                                        <f:convertNumber type="percent"  locale="pt,BR"  />
                                    </p:inputText>


                                    <p:outputLabel value="Índice de reajuste:" styleClass="grid_5 alpha anualCorrectionLabel" />
                                    <div class="grid_7">
                                        <p:selectOneMenu id="blockAutocomplete" value="#{managerEnterprise.enterprise.anualCorrection}" >  
                                            <f:selectItem itemLabel="" itemValue="" />  
                                            <f:selectItems value="#{managerEnterprise.selectAnualCorrection()}" /> 
                                        </p:selectOneMenu> 
                                    </div>
                                </p:panel>
                                <div class="clear"/>

                                <p:panel header="Juros por Parcela" styleClass="clearfix grid_24 ">

                                    <div class="grid_12">
                                        <p:outputLabel for="qtdParcel" value="Qtd. Parcelas:" styleClass="grid_7 qtdParcelLabel" />
                                        <p:inputText id="qtdParcel" styleClass="grid_16" value="#{managerEnterprise.interestParcel.qtd}"/>

                                        <div class="clear-both" />

                                        <p:outputLabel for="porc" value="Taxa de Juros:" styleClass="grid_7 porcLabel" />
                                        <p:inputText id="porc" styleClass="grid_16" value="#{managerEnterprise.interestParcel.porc}"
                                                     onkeypress="jQuery(this).autoNumeric({pSign: 's',aSign: '%', aSep: '.', aDec: ',', vMax:'999999999.999999999'} );">
                                            <f:convertNumber type="percent"  locale="pt,BR"   />
                                        </p:inputText>
                                        <div class="clear" />
                                        <div class="grid_23">
                                            <div class="buttonAction ">
                                                <p:commandButton value="Adicionar" actionListener="#{managerEnterprise.addInterestParcel()}"
                                                                 icon="ui-icon-plus" 
                                                                 update="@this, tableInterest, porc, qtdParcel, :tabView:createLot:typeLotAutocomplete"
                                                                 process="@this, tableInterest, porc, qtdParcel"/>
                                                <p:commandButton value="Limpar" icon="ui-icon-close"/>

                                            </div>
                                        </div>
                                    </div>
                                    <p:dataTable id="tableInterest"  styleClass="grid_12"
                                                 var="interestValue"
                                                 rowIndexVar="idInterest"
                                                 emptyMessage="Nenhum registro"
                                                 value="#{managerEnterprise.interestParcels}">  
                                        <f:facet name="header">
                                            Juros por Parcela
                                        </f:facet>
                                        <p:column headerText="Quantidade de Parcelas"> 
                                            #{interestValue.qtd}
                                        </p:column>  
                                        <p:column headerText="Taxa de Juros">  
                                            #{interestValue.porc}%
                                        </p:column>
                                        <p:column headerText="Excluir" width="10">  
                                            <p:commandButton actionListener="#{managerEnterprise.removeInterest(idInterest)}"
                                                             icon="ui-icon-close" update="tableInterest, @this, :tabView:createLot:typeLotAutocomplete"  
                                                             process="tableInterest @this"/>
                                        </p:column> 
                                    </p:dataTable>
                                </p:panel>
                                <div class="clear"/>
                                <p:panel header="Tipos de Lote" styleClass="clearfix grid_24 ">

                                    <div class="grid_12">
                                        <p:outputLabel for="typeLot" value="Tipo:" styleClass="grid_7 qtdParcelLabel" />
                                        <p:inputText id="typeLot" styleClass="grid_16" value="#{managerEnterprise.typeLot.name}"/>

                                        <p:outputLabel for="valuemeter" value="Valor por m²:" styleClass="grid_7 porcLabel" />
                                        <p:inputText id="valuemeter" styleClass="grid_16" value="#{managerEnterprise.typeLot.value}"
                                                     onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );">
                                            <f:convertNumber type="currency"  locale="pt,BR"   />
                                        </p:inputText>
                                        <br/>
                                        <div class="grid_23">
                                            <div class="buttonAction">
                                                <p:commandButton value="Adicionar" actionListener="#{managerEnterprise.addTypeLots()}"
                                                                 icon="ui-icon-plus" 
                                                                 update="@this, tableTypeLot, typeLot, valuemeter"
                                                                 process="@this, tableTypeLot, typeLot, valuemeter"/>
                                                <p:commandButton value="Limpar" icon="ui-icon-close"/>

                                            </div>
                                        </div>
                                    </div>
                                    <p:dataTable id="tableTypeLot" styleClass="grid_12"
                                                 var="typeLot"
                                                 rowIndexVar="idTypeLot"
                                                 emptyMessage="Nenhum registro"
                                                 value="#{managerEnterprise.typeLots}">  
                                        <f:facet name="header">
                                            Tipos de Lote
                                        </f:facet>
                                        <p:column headerText="Tipo"> 
                                            #{typeLot.name}
                                        </p:column>  
                                        <p:column headerText="R$/m²">  
                                            #{typeLot.value}
                                        </p:column>
                                        <p:column headerText="Excluir" width="10">  
                                            <p:commandButton actionListener="#{managerEnterprise.removeTypeLot(idTypeLot)}"
                                                             icon="ui-icon-close" update="tableTypeLot @this"  
                                                             process="tableTypeLot @this"/>
                                        </p:column> 
                                    </p:dataTable>
                                </p:panel>
                                <div class="clear"/>
                                <p:panel header="Cartório" styleClass="clearfix grid_24 ">
                                    <p:outputLabel value="Nome:" styleClass="grid_3" />
                                    <p:inputText styleClass="grid_20" value="#{managerEnterprise.enterprise.nameNotary}"/>

                                    <p:outputLabel value="Matricula:" styleClass="grid_3" />
                                    <p:inputText styleClass="grid_20" value="#{managerEnterprise.enterprise.numRegistryNotary}"/>

                                    <p:outputLabel value="Livro:" styleClass="grid_3" />
                                    <p:inputText styleClass="grid_8" value="#{managerEnterprise.enterprise.bookNotary}"/>

                                    <p:outputLabel value="Folha: " styleClass="grid_4 alpha" />
                                    <p:inputText styleClass="grid_8" value="#{managerEnterprise.enterprise.leafNotary}"/>

                                    <p:outputLabel value="Cidade:" styleClass="grid_3" />
                                    <p:autoComplete styleClass="grid_20" dropdown="true" converter="cityconverter"   
                                                    var="cityValue" itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" 
                                                    itemValue="#{cityValue}" value="#{managerEnterprise.cityNotary}"
                                                    scrollHeight="200" forceSelection="true"
                                                    completeMethod="#{managerCity.autocomplete}" />  

                                </p:panel>
                                <div class="clear" />
                                <p:panel header="Corretores" styleClass="clearfix grid_24 ">
                                    <p:pickList value="#{managerEnterprise.correctorSource}" var="corrector" 
                                                itemValue="#{corrector}" itemLabel="#{corrector.name}" 
                                                converter="correctorconverter"  
                                                showSourceFilter="true" showTargetFilter="true" 
                                                filterMatchMode="contains" style="width: 95%;">  

                                        <f:facet name="sourceCaption">Disponíveis</f:facet>  
                                        <f:facet name="targetCaption">Selecionados</f:facet>  

                                    </p:pickList>
                                </p:panel>
                                <div class="clear" />
                                <p:panel header="Usuário Administrador" styleClass="clearfix grid_24 ">
                                    <p:outputLabel value="Usuário:" styleClass="grid_3" />
                                    <p:autoComplete styleClass="grid_20" style="width: 62.5%" dropdown="true" converter="#{autocompleteconverter}"   
                                                    var="us" itemLabel="#{us.name}" 
                                                    id="usersAutocomplete"
                                                    disabled="#{managerEnterprise.actualUser}"
                                                    itemValue="#{us}" value="#{managerEnterprise.users}"
                                                    scrollHeight="200" forceSelection="true"
                                                    completeMethod="#{managerEnterprise.autocompleteUsers}">
                                        <p:ajax event="itemSelect" />
                                        <f:param name="className" value="Users" />
                                    </p:autoComplete>
                                    <p:selectBooleanCheckbox styleClass="selectUserActual"  value="#{managerEnterprise.actualUser}" itemLabel="Utilizar usuário atual" style="margin-left: 10px" label="Utilizar usuário atual">  
                                        <p:ajax update="usersAutocomplete" listener="#{managerEnterprise.loadUser()}" />  
                                    </p:selectBooleanCheckbox>

                                </p:panel>
                                <div class="clear" />

                                <p:panel id="panelAnnex" header="Anexos" styleClass="clearfix grid_24 ">
                                    <p:fileUpload 
                                        mode="advanced"  
                                        label="Anexar"
                                        fileUploadListener="#{managerEnterprise.handle}"
                                        multiple="true" 
                                        auto="true"
                                        invalidFileMessage="Tipo de arquivo não suportado."
                                        invalidSizeMessage="Tamanho do arquivo não é suportado"
                                        uploadLabel="Enviar"
                                        cancelLabel="Cancelar"
                                        immediate="true"
                                        update="panelAnnex, tableAnnex"
                                        allowTypes="/(\.|\/)(gif|jpe?g|png|pdf)$/"/> 
                                    <br/>
                                    <p:dataTable id="tableAnnex" styleClass="grid_24" emptyMessage="Nenhum registro"
                                                 value="#{managerEnterprise.annexs}" style="margin-left:  -3px; width: 100%" rowIndexVar="idAnnex" var="annex">  

                                        <p:column headerText="Descrição">  
                                            #{annex.descricao}
                                        </p:column>  
                                        <p:column headerText="Tipo">  
                                            #{annex.type}
                                        </p:column>  
                                        <p:column headerText="Excluir" width="10">  
                                            <p:commandButton actionListener="#{managerEnterprise.removeAnnex(idAnnex)}"
                                                             icon="ui-icon-close" update="tableAnnex @this" 
                                                             process="@this tableAnnex"/>
                                        </p:column> 
                                    </p:dataTable>
                                </p:panel>
                                <div class="double-line" />
                                <div class="buttonAction">
                                    <p:commandButton value="Salvar" process="@form" update="@form, :tabView" 
                                                     actionListener="#{managerEnterprise.create()}"  
                                                     icon="ui-icon-disk" styleClass="ui-priority-primary"/>
                                    <p:commandButton value="Limpar" icon="ui-icon-close" immediate="true"
                                                     actionListener="#{managerEnterprise.init()}"/>

                                </div>
                            </div>
                        </h:form>
                    </div>
                </p:tab>
                <p:tab id="tba2"  title="Lotes"> 
                    <ui:include  src="createlot.xhtml"/>
                </p:tab>
                <p:tab id="tba4" title="Resumo">
                    <div class="section">
                        <h:form id="formResume" enctype="multipart/form-data">
                            <p:growl autoUpdate="true" />
                            <div class="container_24 clearfix">

                                <p:dataTable id="tableLots"  styleClass="grid_24"
                                             var="lotsValue" paginator="true" paginatorPosition="bottom"
                                             rows="15"
                                             rowIndexVar="idLots"
                                             emptyMessage="Nenhum registro"
                                             value="#{managerEnterprise.lots}">  
                                    <f:facet name="header">
                                        Lotes
                                    </f:facet>
                                    <p:column style="width:16px">  
                                        <p:rowToggler />  
                                    </p:column>
                                    <p:column headerText="Nº"> 
                                        <h:outputLabel value="#{lotsValue.num}"/>
                                    </p:column>  
                                    <p:column headerText="Quadra"> 
                                        <h:outputLabel value="#{lotsValue.block}"/>
                                    </p:column>  
                                    <p:column headerText="Dimensão"> 
                                        <h:outputLabel value="#{lotsValue.dimessionX eq null ? 'Variável':lotsValue.dimessionX}"/>
                                        <h:outputLabel value="#{lotsValue.dimessionX ne null ? ' X ':''}"/>
                                        <h:outputLabel value="#{lotsValue.dimessionY eq null ? '':lotsValue.dimessionY}"/>
                                    </p:column>  
                                    <p:column headerText="Área"> 
                                        <h:outputLabel value="#{lotsValue.area}">
                                            <f:convertNumber pattern="#,###,##0.00"/>
                                        </h:outputLabel>
                                    </p:column>  
                                    <p:column headerText="Tipo"> 
                                        <h:outputLabel value="#{lotsValue.typeLot.name}"/>
                                    </p:column>  
                                    <p:column headerText="m²"> 
                                        <h:outputLabel value="#{lotsValue.typeLot.value}">
                                            <f:convertNumber pattern="#,###,##0.00"/>
                                        </h:outputLabel>
                                    </p:column>  
                                    <p:column headerText="A Vista"> 
                                        <h:outputLabel value="R$"/>
                                        <h:outputLabel value="#{lotsValue.sees}">
                                            <f:convertNumber pattern="#,###,##0.00"/>
                                        </h:outputLabel>
                                    </p:column>
                                    <p:rowExpansion>
                                        <p:panel header="Pagamento Parcelado" styleClass="clearfix grid_24">
                                            <p:outputLabel value="A vista:" styleClass="grid_3" />
                                            <h:outputLabel value="R$" styleClass="grid_1"/>
                                            <h:outputLabel value="#{lotsValue.sees}" styleClass="grid_5">
                                                <f:convertNumber pattern="#,###,##0.00"/>
                                            </h:outputLabel>

                                            <p:outputLabel value="Entrada: " styleClass="grid_4" />
                                            <h:outputLabel value="R$" styleClass="grid_1"/>
                                            <h:outputLabel value="#{lotsValue.valueBegin}" styleClass="grid_5">
                                                <f:convertNumber pattern="#,###,##0.00"/>
                                            </h:outputLabel>
                                            <p:dataTable   styleClass="grid_24"
                                                           var="subInterestValue"
                                                           rowIndexVar="idInterest"
                                                           emptyMessage="Nenhum registro"
                                                           value="#{lotsValue.valueInterestParcels}">  
                                                <p:column headerText="Quantidade de Parcelas"> 
                                                    <h:outputLabel value="#{subInterestValue.interestParcel.qtd}"/>
                                                </p:column>  
                                                <p:column headerText="Valor">  
                                                    <h:outputLabel value="R$ #{subInterestValue.value}">
                                                        <f:convertNumber pattern="#,###,##0.00"/>
                                                    </h:outputLabel>
                                                </p:column> 
                                            </p:dataTable> 
                                        </p:panel>
                                    </p:rowExpansion>
                                </p:dataTable>
                                <div class="buttonAction">
                                    <p:commandButton value="Finalizar Cadastro" process="@this" update="@form, :tabView" 
                                                     actionListener="#{managerEnterprise.finalyLot()}"
                                                     icon="ui-icon-plus" styleClass="ui-priority-primary"/>
                                </div>
                            </div>
                        </h:form>
                    </div>
                </p:tab>
                <p:tab id="tba3" rendered="false"  title="Coordenadas">
                    <div class="section">

                        <h:form id="coord" enctype="multipart/form-data">
                            <p:growl autoUpdate="true" />

                            <div class="container_24 clearfix">
                                <p:panel id="gridRef"  header="Georreferenciamento" styleClass="clearfix grid_24 ">

                                    <p:outputLabel value="Lote" styleClass="grid_2"/>
                                    <p:autoComplete styleClass="grid_11" dropdown="true" converter="lotconverter"   
                                                    var="lotValue" itemLabel="Lote #{lotValue.num}" 
                                                    itemValue="#{lotValue}" value="#{managerEnterprise.lot}"
                                                    scrollHeight="200" forceSelection="true"
                                                    completeMethod="#{managerEnterprise.selectItemsLots()}" />  
                                    <div class="clear"/>
                                    <p:outputLabel value="N" styleClass="grid_2"/>
                                    <p:inputText  value="#{managerEnterprise.coordinate.convN}"  styleClass="grid_3"/>
                                    <p:outputLabel value="E" styleClass="grid_1"/>
                                    <p:inputText  value="#{managerEnterprise.coordinate.convE}" styleClass="grid_3"/>
                                    <p:outputLabel value="Zona" styleClass="grid_2"/>
                                    <p:inputText  id="zona" value="#{managerEnterprise.coordinate.convZona}" styleClass="grid_1" />
                                    <p:watermark for="zona" value="M" /> 

                                    <p:commandButton icon="ui-icon-circle-plus" 
                                                     value="Adicionar"
                                                     actionListener="#{managerEnterprise.converterCoord()}"
                                                     action="#{managerEnterprise.initMap()}"
                                                     label="Adicionar"
                                                     title="Adicionar Coordenada"
                                                     update="gridRef, @this"
                                                     styleClass="grid_4"
                                                     process="gridRef @this" />
                                    <div class="clear"/>
                                    <p:dataTable var="gf" id="coordList" 
                                                 value="#{managerEnterprise.lstGeoRef}" 
                                                 styleClass="grid_15" editable="true" rowIndexVar="rowGf">  

                                        <p:ajax event="rowEdit" 
                                                listener="#{managerEnterprise.initMap()}" /> 
                                        <f:facet name="header">  
                                            Coordenadas  
                                        </f:facet>  
                                        <p:column headerText="#" style="width:5%">  
                                            <h:outputText value="#{rowGf + 1}" />  
                                        </p:column>
                                        <p:column headerText="N" style="width:30%">  
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{gf.convN}" />  
                                                </f:facet>  
                                                <f:facet name="input">  
                                                    <p:inputText value="#{gf.convN}" style="width:100%"/>  
                                                </f:facet>  
                                            </p:cellEditor>  
                                        </p:column>  

                                        <p:column headerText="E" style="width:30%">  
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{gf.convE}" />  
                                                </f:facet>  
                                                <f:facet name="input">  
                                                    <p:inputText value="#{gf.convE}" style="width:100%" label="Year"/>  
                                                </f:facet>  
                                            </p:cellEditor>  
                                        </p:column>  

                                        <p:column headerText="Zona" style="width:20%">  
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{gf.convZona}" />  
                                                </f:facet>  
                                                <f:facet name="input">  
                                                    <p:inputText value="#{gf.convZona}" style="width:100%" label="Year"/>  
                                                </f:facet>  
                                            </p:cellEditor>  
                                        </p:column>  

                                        <p:column style="width:15%">  
                                            <p:rowEditor />  
                                            <p:commandButton icon="ui-icon-circle-close" 

                                                             actionListener="#{managerEnterprise.removeGeoRef(gf)}"
                                                             disabled="#{managerEnterprise.lstGeoRef.size() > 1 ? false : true}"
                                                             update=":tabView:coord:gridRef, @this, coordList" 
                                                             process=":tabView:coord:gridRef, @this"
                                                             label="Excluir Coordenadas"
                                                             title="Excluir Coordenadas"
                                                             style="width:15px; height: 15px;"/>
                                        </p:column>  

                                    </p:dataTable>

                                    <div class="grid_7">
                                        <p:gmap center="#{managerEnterprise.centerMap}" id="gmapConflict"
                                                zoom="18" type="HYBRID" 
                                                style="width:300px;height:200px" model="#{managerEnterprise.polygonModel}">

                                        </p:gmap>
                                    </div>
                                    <div class="clear"/>

                                </p:panel>
                                <div class="buttonAction">
                                    <p:commandButton value="Adicionar" process="@this" update=":tabView:coord:resumo, @this" 
                                                     actionListener="#{managerEnterprise.addLotCoord()}"
                                                     icon="ui-icon-plus" />

                                    <p:commandButton value="Limpar" process="@this" update="@this" 
                                                     oncomplete="dlg.show()"
                                                     icon="ui-icon-disk" />
                                </div>
                                <p:panel id="resumo" header="Resumo"  styleClass="clearfix grid_24 ">

                                    <p:dataTable styleClass="grid_7"
                                                 var="varLot"
                                                 rowIndexVar="idLotCo"
                                                 emptyMessage="Nenhum registro"
                                                 value="#{managerEnterprise.lotsCoord}">  
                                        <f:facet name="header">
                                            Lotes
                                        </f:facet>
                                        <p:column headerText="#"> 
                                            #{varLot.num}
                                        </p:column>  
                                        <p:column headerText="Excluir" width="10">  
                                            <p:commandButton actionListener="#{managerEnterprise.removeLot(idLotCo)}"
                                                             icon="ui-icon-close" update="@this"  
                                                             process="@this"/>
                                        </p:column> 
                                    </p:dataTable>
                                    <div class="grid_16">
                                        <p:gmap center="#{managerEnterprise.centerMap}" id="gmapConflict2"
                                                zoom="18" type="HYBRID" 
                                                style="width:100%;height:350px" model="#{managerEnterprise.polygonModelMultiply}">

                                        </p:gmap>
                                    </div>
                                </p:panel>
                            </div>
                            <!--                         <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>-->
                        </h:form>

                    </div>
                </p:tab>
            </p:tabView>
        </ui:define>
    </ui:composition>
</html>